<template>
    <div class="image-aside" id="list-table">
        <div class="aside-content">
            <div class="aside-list" :class="{ 'active': activeId == item.id }" v-for="item in tableData" :key="item.id" @click="handleChangeActiveId(item.id)">
                <span class="truncate" :title="item.name">{{ item.name }}</span>
                <el-button class="aside-list-btn" link type="primary" size="small" @click.stop="handleEdit(item)" v-permission="['updateImageClass,POST']">
                    <el-icon :size="14"><Edit /></el-icon>
                </el-button>
                 <el-popconfirm title="是否要删除该分类？" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(item.id)">
                    <template #reference>
                        <el-button link type="primary" size="small" @click.stop v-permission="['deleteImageClass,POST']">
                            <el-icon :size="14"><Close /></el-icon>
                        </el-button>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="aside-footer">
            <el-pagination 
                background 
                layout="prev, next"
                :current-page="currentPage"
                :page-size="limit"
                :total="total"
                @current-change="getData">
            </el-pagination>
        </div>
    </div>

    <!-- 新增|修改表单 -->
    <form-drawer 
    ref="formDrawerRef" 
    :title="drawerTitle" 
    @submit="handleSubmit"
    :showActions="true"
    :destroyOnClose="true">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false" size="default">
            <el-form-item label="相册名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="order">
                <el-input-number v-model="form.order" :min="0" :max="1000"/>
            </el-form-item>
        </el-form>
    </form-drawer>
</template>
<script setup>
import { ref } from 'vue'
 import { 
        createImageClass,
        updateImageClass,
        getImageClassList,
        deleteImageClass
} from '~/api/image_class'
import FormDrawer from '~/components/FormDrawer.vue'
import { useInitTable, useInitForm } from '~/composables/useCommon'

// 初始化表格数据
const {
    // 分页
    currentPage,
    limit,
    total,
    // 表格数据
    tableData,
    // 获取数据方法
    getData,
    // 删除
    handleDelete,
} = useInitTable({
    // 获取数据的方法
    getList:getImageClassList,
    success:(res) => {
        total.value = res.totalCount
        tableData.value = res.list
        const item = tableData.value[0]
        if (item) {
            handleChangeActiveId(item.id)
        }
    },
    // 删除api
    deleteData:deleteImageClass
})

// 初始化表单
const {
    drawerTitle,
    form,
    formRef,
    rules,
    formDrawerRef,
    handleSubmit,
    handleCreate,
    handleEdit
} = useInitForm({
    // 表单初始化数据
    form:{
        id: null,
        name: "",
        order:50
    },
    // 表单验证规则
    rules:{
        name: [
        {
            required: true,
            message: '图库分类名称不能为空',
            trigger: 'blur'
        }]
    },
    // 获取方法
    getData,
    // 新增数据api
    createData:createImageClass,
    // 修改数据api
    updateData:updateImageClass
})

// 选中图库分类id
const activeId = ref(0)
const emit = defineEmits(["change"])
function handleChangeActiveId(id) {
    activeId.value = id
    emit("change", id)
}

defineExpose({
    openCreate:handleCreate
})
</script>
<style lang="scss" scoped>
.image-aside {
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 0 4px;
    .aside-content {
        flex: 1;
        border-right: 1px solid #eee;
        .active, .aside-list:hover {
            background: #eff6ff;
        }
        .aside-list {
            border-bottom: 1px solid #f4f4f4;
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 12px;
            font-size: 14px;
            color: #4b5563;
            .aside-list-btn {
                margin-left: auto;
                padding: 0;
            }
            .truncate {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .aside-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        border-right: 1px solid #eee;
    }
}
:deep(.el-button+.el-button) {
    margin-left: 0;
    padding: 4px;
}
</style>